<template>
    <div class="wrapper">
        <header>
            <slot name="header"></slot>
        </header>
        <main>
            <slot></slot>
        </main>
        <footer>
            <slot name="footer" :data="data"></slot>
        </footer>
    </div>
</template>

<script setup lang="ts">
import { getCurrentInstance, ref } from 'vue';

const instance = getCurrentInstance()
console.log("🚀 ~ instance:", instance)
const data = ref([1, 2, 3, 4, 5])
</script>
<style lang="scss" scoped>
.wrapper {
    background-color: palevioletred;
}
</style>